<template>
  <div class="login flex justify-center items-center w-full">
    <div class="outBorder">
      <div ref="Area" class="flex vanta_area items-center">
        <img class="logo mr-10" src="/imgs/line-chat-w.png" />
        <div class="text-white">闲迅</div>
      </div>

      <div class="mt-110 ml-100 mr-100 w-240">
        <el-input v-model="chatNum" class="mb-10" placeholder="闲迅号">
          <template #prefix>
            <img class="logo2" src="/imgs/line-chat-b.png" />
          </template>
        </el-input>

        <el-input
          v-model="password"
          class="mb-15"
          placeholder="密码"
          show-password
        >
          <template #prefix>
            <el-icon class="logo2" :size="20"><Lock /></el-icon>
          </template>
        </el-input>

        <div class="flex justify-between">
          <div
            class="blue-button cursor-pointer w-100 h-35 flex justify-center items-center"
            @click="login()"
          >
            确定
          </div>
          <div
            class="text-button cursor-pointer w-100 h-35 flex justify-center items-center"
          >
            取消
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as THREE from "three";
import FOG from "vanta/src/vanta.fog";
import { onMounted, onBeforeUnmount, ref } from "vue";

import IndexService from "@/service/IndexService";

import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";
let router = useRouter();

//使用ref引用挂载区域
const Area = ref(null);
//创建一个全局的变量来使用vanta.js
/**
 *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
 *但是vue3 setup中是没有this，所以要另外创建一个
 **/
let vantaEffect: any = null;
//在两个生命周期钩子内创建vantaEffect

// vanta 网址
// https://www.vantajs.com/
onMounted(() => {
  vantaEffect = FOG({
    el: Area.value,
    THREE: THREE,
    //如果需要改变样式，要写在这里
    //因为这里vantaEffect是没有setOptions这个方法的
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 125.0,
    minWidth: 200.0,
    highlightColor: 0xff41d3,
    midtoneColor: 0x84fc,
    lowlightColor: 0x233cfc,
    baseColor: 0xc8e2f2,
    blurFactor: 0.6,
    speed: 1.5,
    zoom: 0.6,
  });
});

onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});

/* 登录方法 */
let chatNum = ref("");
let password = ref("");

const login = async () => {
  let data = {
    chatNum: chatNum.value,
    password: password.value,
  };

  var a = await IndexService.login(data);

  if (a.data.code > 0) {
    sessionStorage.setItem("token", JSON.stringify(a.data.token));
    sessionStorage.setItem("personalData", JSON.stringify(a.data.data));
    router.push({ path: "/friends" });
  } else {
    ElMessage({
      message: a.data.msg,
      type: "warning",
    });
  }
};
</script>

<style lang="sass" scoped>
/* 边框颜色 */
$borderColor: #ebebeb
/* 最外层高度 */
$outHeight: 320px

.login
  height: 100vh
  .outBorder
    border: 1px solid
    border-radius: 5px
    border-color: $borderColor

    min-height: $outHeight
    min-width: 430px
    .vanta_area
      padding: 10px



.logo
  width: 30px
  height: 30px

.logo2
  width: 20px
  height: 20px

  margin: 5px
</style>
